<template>
  <div class="d-flex">
    <div class="menu-bg" v-if="isShowMenu">
      <w-menu class="overflow-hidden" :data="target"></w-menu>
    </div>
    <router-view />
  </div>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
let resource = [
  // {
  //   name: '资源目录',
  //   icon: 'Document',
  //   index: '/resource',
  //   children: [
  //     {
  //       name: '资源目录查看',
  //       index: '/resource/resource-view',
  //       icon: 'Document',
  //     },
  //     {
  //       name: '资源目录管理',
  //       index: '/resource/resource-manager',
  //       icon: 'Document',
  //     },
  //   ],
  // },
  {
    name: '资源目录查看',
    index: '/resource/resource-view',
    icon: 'Document',
  },
  {
    name: '产量产值分析',
    icon: 'Document',
    index: '/resource/analyse',
  },
  {
    name: '厂房',
    icon: 'Document',
    index: '/resource/factory',
  },
  {
    name: '出库',
    icon: 'Document',
    index: '/resource/out-warehouse',
  },
  {
    name: '入库',
    icon: 'Document',
    index: '/resource/put-storage',
  },
  {
    name: '育菇房',
    icon: 'Document',
    index: '/resource/mushroomout',
  },
  {
    name: '物联网设备',
    icon: 'Document',
    index: '/resource/monitor',
  },
];
let system = [
  {
    name: '用户管理',
    index: '/system/user',
    icon: 'Document',
  },
  // {
  //   name: '系统管理',
  //   icon: 'Document',
  //   index: '/system',
  //   children: [
  //     {
  //       name: '用户管理',
  //       index: '/system/user',
  //       icon: 'Document',
  //     },
  //     // {
  //     //   name: '角色管理',
  //     //   index: '/system/role',
  //     //   icon: 'Document',
  //     // },
  //   ],
  // },
];
let assist = [
  {
    name: '数据大屏',
    icon: 'Document',
    index: '/assist',
    children: [
      {
        name: '精准营销',
        index: '/assist/screen-data',
        icon: 'Document',
      },
    ],
  },
];
const routesList = {
  system,
  resource,
  assist,
  production: resource,
};
let target = ref([]);
let isShowMenu = ref(false);
watch(
  () => router.currentRoute.value,
  (newValue, oldValue) => {
    Object.keys(routesList).forEach((key) => {
      if (location.pathname.includes(key)) {
        target.value = routesList[key];
      }
      if (!location.pathname.includes('assist/screen-data')) {
        isShowMenu.value = true;
      } else {
        isShowMenu.value = false;
      }
    });
  },
  { immediate: true }
);
</script>

<style scoped>
.el-menu {
  background: linear-gradient(121deg, rgb(78, 187, 255) 9%, rgb(92, 108, 252) 94%);
  height: calc(100vh - 64px);
  overflow: auto;
}
</style>
